<template>
	<view class="page-view ticket tabbar">
		<view class="page-content">
			<net-image src="images/tickets/lp_01.png" width="750rpx" height="1160rpx" @click="onClick" class="background"></net-image>
			<net-image src="images/gif/lp_02.gif" width="455rpx" height="86rpx" class="gif gif-1" @click="onClick"></net-image>
			<net-image src="images/tickets/lp_03.png" width="750rpx" height="200rpx" class="gif gif-2" @click="onClick"></net-image>
			<net-image src="images/tickets/lp_04.gif" width="228rpx" height="140rpx" class="gif gif-3" @click="onClick"></net-image>
			<net-image src="images/tickets/lp_05.gif" width="240rpx" height="220rpx" class="gif gif-4" @click="onClick"></net-image>
			<net-image src="images/tickets/lp_06.gif" width="196rpx" height="118rpx" class="gif gif-5" @click="onClick"></net-image>
			<net-image src="images/tickets/lp_07.gif" width="150rpx" height="110rpx" class="gif gif-6" @click="onClick"></net-image>
		</view>
		<custom-tabbar :selected-index="1"></custom-tabbar>
	</view>
</template>

<script>
	import {COMMON_SHARE, SETTINGS} from '@/utils/const.js'
	import NetImage from '@/components/netImage.vue'
	import CustomTabbar from '@/components/customTabbar.vue'
	import {reportEvent} from '@/services/miniApi.js'
	export default {
		components: {
			NetImage,
			CustomTabbar
		},
		data() {
			return {

			}
		},
		methods: {
			onClick(){
				wx.navigateTo({
					url: '/pages/webview/webview?url='+encodeURIComponent(SETTINGS.TICKET_URL)
				})
				reportEvent('ticketonline')
			}
		},
		onShow() {
			uni.hideTabBar()
			reportEvent('tabbar_ticket')
		},
		onShareAppMessage(){
			return COMMON_SHARE
		}
	}
	
</script>

<style lang="scss">
	.ticket {
		background: #0f2741;
		.page-content {
			overflow: hidden;
		}
		.background {
			position: absolute;
			left: 0;
			top: 640rpx;
			width: 100%;
			z-index: 2;
		}
		.gif {
			position: absolute;
			
			&.gif-1 {
				left: 147.5rpx;
				top: 520rpx;
				z-index: 2;
			}
			&.gif-2 {
				left: 0rpx;
				top: 190rpx;
				z-index: 2;
			}
			&.gif-3 {
				left: 280rpx;
				top: 625rpx;
				z-index: 2;
			}
			&.gif-4 {
				right: 0;
				top: 615rpx;
				z-index: 1;
			}
			&.gif-5 {
				left: 0rpx;
				top: 855rpx;
				z-index: 2;
			}
			&.gif-6 {
				right: 0;
				top: 1225rpx;
				z-index: 2;
			}
		}
	}
</style>
